/*
 * @Author: your name
 * @Date: 2020-12-08 09:23:33
 * @LastEditTime: 2020-12-08 09:41:07
 * @LastEditors: Please set LastEditors
 * @Description: 四个方向的边框过渡效果
 * @FilePath: \gitee-WeBi\css\common\effect\fourBorder.less
 */
/*  */
@import "../../variables/theme.less";
/*  */
.zz-effect-fb {
    position: relative;
    /* width: 200px;
    height: 100px;
    margin: 100px auto;
    background: pink;
    border: 2px solid transparent; */
    transition: border-color .8s ease-in;
}

.zz-effect-fb:hover {
    border-color: @themeColor;
}

.zz-effect-fb:before,
.zz-effect-fb:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 3px solid transparent;
}

.zz-effect-fb:hover:before,
.zz-effect-fb:hover:after {
    width: 100%;
    height: 100%;
}

.zz-effect-fb:after {
    top: -3px;
    left: -3px;
    transition: border-color 0s ease-out 0.8s, width 0.2s ease-out 0.6s, height 0.2s ease-out 0.4s;
}

.zz-effect-fb:hover:after {
    border-top-color: @themeColor;
    border-right-color: @themeColor;
    transition: border-color 0.2s ease-in, width 0.2s ease-in, height 0.2s ease-in 0.2s;
}

.zz-effect-fb:before {
    bottom: -3px;
    right: -3px;
    transition: border-color 0.2s ease-out 0.2s, height 0.2s ease-out, width 0.2s ease-out 0.2s;
}

.zz-effect-fb:hover:before {
    border-bottom-color: @themeColor;
    border-left-color: @themeColor;
    transition: border-color 0.2s ease-in 0.4s, width 0.2s ease-in 0.4s, height 0.2s ease-in 0.6s;
}